<template>
  <div id="app">
            我的名字，<span  v-html="name">  </span>,爱好{{hover[0]}}<br>
               {{socre}}
    <span v-if="socre>90&&socre<100">优秀</span>
    <span v-else-if="socre>80&&socre<90">良好</span>
    <span v-else>差</span>
    <div v-for="h in hover" :key="h">{{h}}</div>

    <button v-on:click="myclick" @mouseover="mymouseover">减一</button>
    <br>
    <button v-on:click="demo(5)" @mouseover="mymouseover">变化</button>
                {{socre2}}
<!--
     组件三步走：   3.使用组件，声明时叫什么，标签名就叫做什么-->

    <!--   字符串 String   数字  Number  布尔  boolean  数组 array  传递参数，除string类型外,其他类型必须使用v-bind-->
    <Demo name="张三"  v-bind:age="12"></Demo>


    <hr/>

   <router-view/>

    <button @click="goRouter">路由跳转</button>


    <button @click="getData"> 获取到的数据,{{obj.name}}},{{obj.age}}</button>
  </div>
</template>

<script>
// 组件三步走：   1.引入组件
 import Demo from "@/components/Demo";


export default {
  name: 'App',
// 组件三步走:  2.声明组件
  components:{
    Demo
  },
     data(){
       return{
         name: "<span style='color:red'>北京大学1ss1</span>",
         hover:["写代码","看java视频"],
         socre: 98,
         socre2: 98,
         obj : {}
       }
     },
     //所有自定义函数都需要写在methods属性中
     methods:{

    myclick(){
               //如果希望调用Model中属性，必须使用this. 进行调用
      this.socre=this.socre-1
    },
       mymouseover(){
         this.socre=this.socre+1
       },
       demo(num){
         this.socre2=num
       },
      goRouter(){
        this.$router.push("/a");
      },
      getData(){

      //get 请求
/*     this.$axios.get("/api/show?name=张三&age=12")
          .then(res=>{
            console.log(res)
            this.obj=res.data
          })
        .catch(err=>{
          console.log(err)

        })*/

        //post 请求
        this.$axios.post("/api/show",this.$qstring.stringify({name:"张三",age:12}))
            .then(res=>{
              console.log(res)
              this.obj=res.data
            })
            .catch(err=>{
              console.log(err)

            })

      }

     },
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
